<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="comm.dhee.dto.T001"%>
<%@page import="comm.dhee.dto.T003"%>
<%@page import="comm.dhee.dto.M001"%>
<%@page import="comm.dhee.dto.T001T002"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>華信商会(株) 販売管理業務システム</title>
		<meta name="renderer" content="webkit">

		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css" media="screen" />
	</head>
	
	<body>
	<%@include file="common/include.jsp"%>
		<!-- Body Begin -->
		
		<form action="PR20201a.action"  method="post"  id="form2" name="form2">
		<div class="container">
			
			 
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-6" align="left">
									<font style="font-size: 14px;line-height: 29px;">売掛登録</font>
								</div>
								<div class="col-md-6" align="right">
									<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#goodsModal" id="btna" >作成</button>
									<button type="reset" class="btn btn-default btn-sm">クリア</button>
								</div>
						
							</div>
						</div>
						
						<div class="panel-body">
						
							<div class="row">
								<div class="col-md-4">
									<div class="input-group">
										<span class="input-group-addon">顧客コード</span>
										<input type="text" class="form-control" name="gukecode" id="gukecode" value="${gukecode}">
										<span class="input-group-addon"><a href="#" data-toggle="modal" data-target="#customerModal" onclick="goPage(1,'tbody1','kokyakuPage',0)" ><span class="glyphicon glyphicon-search"></span></a>
										</span>
									</div>
									
								
								</div>
								
								<div class="col-md-4">
									<div class="input-group date form_date">
										<span class="input-group-addon" id="btn1">請求日付</span>
										<input type="text" class="form-control" id="qingqiudate" name="qingqiudate" readonly>
										<span class="input-group-addon"><span  class="glyphicon glyphicon-calendar" ></span></span>
									</div>
								</div>
							</div>
							<br>

						</div>
					</div>
					
				</div>
			</div>
			</div>
		</form>
				<!-- Body End -->
				
	<!-- Customer Modal -->
	<div class="modal fade" id="customerModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">顧客情報</h4>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-6" align="left">
									<div class="input-group">
										<span class="input-group-addon">顧客名</span> <input type="text"
											class="form-control" id="kokyakuMei" name="kokyakuMei">
									</div>
								</div>
								
								<div class="col-md-6" align="right">
									<button type="button" class="btn btn-primary btn-sm" id="but1" name="but1">検索</button>
								</div>
								
							</div>
						</div>
						<div class="panel-body">
						<% String date1 =(String)request.getAttribute("data1");
						String kokyakuMei = (String)request.getAttribute("kokyakuMei");
						%>
							<table class="table table-bordered" id="customerTable">
								<thead>
									<tr>
										<th style="text-align: center;">選択</th>
										<th style="text-align: center;">顧客コード</th>
										<th style="text-align: center;">顧客名</th>
										<th style="text-align: center;">信用限度額</th>
									</tr>
								</thead>
								<tbody id="tbody1">
									<c:forEach var="p" items="${kokyakulist}">				
										<tr>
										<td style="text-align: center;">
										<a onclick="gukec(this.name)" name="${p.kokyakuCode }" data-dismiss="modal"><span class="glyphicon glyphicon-check"></span></a></td>
										<td style="text-align: center;" id="${p.kokyakuCode }"> ${p.kokyakuCode } </td>
										<td style="text-align: left;">${p.kokyakuMei }</td>
										<td style="text-align: right;">${p.strshinyouGendoGaku}</td>
										</tr>			
									</c:forEach>
								</tbody>
							</table>
							<nav class="page" id="kokyakuPage">
								
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		<%@include file="common/include2.jsp"%>
			<script type="text/javascript">	
			$(function() {
			$("#but1").click(
					 function() {
						
						 $.ajax({
							type : "post",
							url : " selkokyakuList.action",
							async : true,
							data : "kokyakuMei=" + $("#kokyakuMei").val(),
							success :
								function(data) {
								$("#tbody1").empty();
									$.each(data.kokyakulist, function(key, val) {	
									$("#tbody1").append('<tr><td style="text-align: center;"><a onclick="gukec(this.name)" name="'
											+ val.kokyakuCode+ '" data-dismiss="modal"><span class="glyphicon glyphicon-check"></span></a></td><td style="text-align: center;" id="'
											+ val.kokyakuCode+ '">'
											+ val.kokyakuCode + '</td><td style="text-align: left;">'+val.kokyakuMei+'</td><td style="text-align: right;">'
											+ val.strshinyouGendoGaku + '</td></tr>');
										
									});	
									
									 goPage(1, "tbody1","kokyakuPage",0);
							}
						});	 
					}) 
		 })
			function gukec(result) {
		    var gukecode = $("#gukecode").val(result); 
			
		}
			function datec(result1) {
		    var qingqiudate = $("#qingqiudate").val(result1); 
						
		}
				
		
			$(document).ready(function() {
				$("#btna").click(function() {
					var qingqiudate = document.getElementById("qingqiudate").value; 
					/* alert("你点击了按钮"); */
						$("form[id='form2']").submit();
				});
			});
			
			function goPage(pno, table_id, page_id, nextpage) {
				var tbody = document.getElementById(table_id);
				var num = tbody.rows.length;
				var allPage = 0;
				var pageSize = 5; 

				if(num / pageSize > parseInt(num / pageSize)) {
					//				if(num / pageSize > parseInt(num / pageSize)) {
					allPage = parseInt(num / pageSize) + 1;
				} else {
					allPage = parseInt(num / pageSize);
				}
				var nowPage = pno;
				var startRow = (nowPage - 1) * pageSize + 1;
				var endRow = nowPage * pageSize;
				endRow = (endRow > num) ? num : endRow;
				for(var i = 1; i < (num + 1); i++) {
					var oneRow = tbody.rows[i - 1];
					if(i >= startRow && i <= endRow) {
						oneRow.style.display = "";
					} else {
						oneRow.style.display = "none";
					}
				}
				var Str = "";
				Str += "<ul class='pagination'>";
				Str += "<li >";

				if(allPage <= 5) {
					Str += "<li class='disabled'>";
					Str += "<a aria-label='Previous'><span aria-hidden='true'>«</span></a>";
					Str += "</li>";
					for(var j = 0; j < allPage; j++) {
						if(j == (nowPage - 1)) {
							Str += "<li class='active'>";
						} else {
							Str += "<li>";
						}
						Str += "<a onclick=goPage(" + (j + 1) + ",'" + table_id + "','" + page_id + "')>" + (j + 1) + "</a>";
						Str += "</li>";
					}
					Str += "<li>";
					Str += "<li class='disabled'>";
					Str += "<a aria-label='Next'><span aria-hidden='true'>»</span></a>";
					Str += "</li>";
					Str += "</ul>";
				} else {
					if(nextpage >= 1) {
						Str += "<a onclick=goPage(" + pno + ",'" + table_id + "','" + page_id + "'," + (nextpage - 1) + ") aria-label='Previous'><span aria-hidden='true'>«</span></a>";
					} else {
						Str += "<li class='disabled'>";
						Str += "<a  aria-label='Previous'><span aria-hidden='true'>«</span></a>";

					}
					Str += "</li>";

					var j = nextpage + 0;
					for(; j < (nextpage + 5); j++) {
						if(j == (nowPage - 1)) {
							Str += "<li class='active'>";
						} else {
							Str += "<li>";
						}
						Str += "<a onclick=goPage(" + (j + 1) + ",'" + table_id + "','" + page_id + "'," + nextpage + ")>" + (j + 1) + "</a>";
						Str += "</li>";
					}
					Str += "<li>";
					if(nextpage+5 < allPage) {
						Str += "<a onclick=goPage(" + pno + ",'" + table_id + "','" + page_id + "'," + (nextpage + 1) + ") aria-label='Next'><span aria-hidden='true'>»</span></a>";
						Str += "</li>";
						Str += "</ul>";
					} else {
						Str += "<li class='disabled'>";
						Str += "<a><span aria-hidden='true'>»</span></a>";
						Str += "</li>";
						Str += "</ul>";
					}

				}
				document.getElementById(page_id).innerHTML = Str;

			}
			
			
			</script>
			<script type="text/javascript">
			${message1}
			${message}
			</script>
			<script type="text/javascript">
			//init datetimepicker
			$(".form_date").datetimepicker({
				language: 'ja',
				autoclose: true,
				todayHighlight: true,
				todayBtn: true,
				minView: "month",
				format: "yyyy-mm-dd",
				pickerPosition: "bottom-left"
			});
		</script>
	</body>
</html>